<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>题目复制和移动功能测试</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            margin: 20px;
            background: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .feature-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 20px 0;
        }
        .feature-card {
            padding: 20px;
            border: 2px solid #ddd;
            border-radius: 10px;
            background: #fafafa;
        }
        .move-card {
            border-color: #17a2b8;
            background: #e8f4f8;
        }
        .copy-card {
            border-color: #28a745;
            background: #e8f5e8;
        }
        .test-section {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background: #fafafa;
        }
        .success { border-left: 4px solid #28a745; background: #d4edda; }
        .error { border-left: 4px solid #dc3545; background: #f8d7da; }
        .info { border-left: 4px solid #17a2b8; background: #d1ecf1; }
        .warning { border-left: 4px solid #ffc107; background: #fff3cd; }
        
        .comparison {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin: 15px 0;
        }
        
        .before, .after {
            padding: 15px;
            border-radius: 5px;
        }
        
        .before {
            background: #f8d7da;
            border: 1px solid #f5c6cb;
        }
        
        .after {
            background: #d4edda;
            border: 1px solid #c3e6cb;
        }
        
        .step-list {
            list-style: none;
            padding: 0;
        }
        
        .step-list li {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }
        
        .step-list li:before {
            content: "✓ ";
            color: #28a745;
            font-weight: bold;
        }
        
        .highlight {
            background: #fff3cd;
            padding: 2px 4px;
            border-radius: 3px;
        }
        
        .api-endpoint {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            margin: 10px 0;
            border-left: 3px solid #007bff;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔧 题目复制和移动功能测试</h1>
        
        <div class="test-section success">
            <h2>✅ 新功能完成</h2>
            <p>已成功实现题目的<strong>移动</strong>和<strong>复制</strong>功能，并修复了之前移动功能的问题。</p>
            <ul>
                <li><strong>修复移动功能</strong>：添加了缺失的API接口</li>
                <li><strong>新增复制功能</strong>：完整的复制题目到其他题库功能</li>
                <li><strong>优化用户界面</strong>：可视化选择，支持批量操作</li>
            </ul>
        </div>

        <div class="feature-grid">
            <div class="feature-card move-card">
                <h3>📦 移动功能</h3>
                <h4>功能特点：</h4>
                <ul>
                    <li>🔄 将题目从一个题库转移到另一个题库</li>
                    <li>❌ 原题库中的题目会被删除</li>
                    <li>📊 自动更新题库题目计数</li>
                    <li>🎯 支持移出到"无题库"状态</li>
                </ul>
                
                <h4>使用场景：</h4>
                <ul>
                    <li>重新组织题库结构</li>
                    <li>将错误分类的题目移到正确题库</li>
                    <li>清理和整理题目分布</li>
                </ul>
                
                <div class="api-endpoint">
                    POST /admin/questions/{id}/move<br>
                    Body: {"question_bank_id": 123}
                </div>
            </div>

            <div class="feature-card copy-card">
                <h3>📋 复制功能</h3>
                <h4>功能特点：</h4>
                <ul>
                    <li>📄 创建题目的完整副本</li>
                    <li>✅ 原题库中的题目保持不变</li>
                    <li>🆕 在目标题库中生成新的题目ID</li>
                    <li>📊 自动更新目标题库题目计数</li>
                </ul>
                
                <h4>使用场景：</h4>
                <ul>
                    <li>在多个题库中共享相同题目</li>
                    <li>创建题目的变体版本</li>
                    <li>备份重要题目</li>
                </ul>
                
                <div class="api-endpoint">
                    POST /admin/questions/{id}/copy<br>
                    Body: {"question_bank_id": 123}
                </div>
            </div>
        </div>

        <div class="test-section info">
            <h2>🧪 测试指南</h2>
            
            <h3>准备工作</h3>
            <ol>
                <li>确保有至少2个题库</li>
                <li>确保其中一个题库有题目</li>
                <li>访问 <a href="http://localhost:8000/admin" target="_blank">管理后台</a></li>
            </ol>
            
            <h3>1. 测试移动功能</h3>
            <ol>
                <li>点击 <span class="highlight">"📦 批量移动题目"</span> 按钮</li>
                <li>选择目标题库（题目将移动到这里）</li>
                <li>选择源题库（有题目的题库）</li>
                <li>勾选要移动的题目</li>
                <li>点击 <span class="highlight">"🚀 开始移动"</span></li>
                <li>确认操作</li>
                <li>验证：原题库题目减少，目标题库题目增加</li>
            </ol>
            
            <h3>2. 测试复制功能</h3>
            <ol>
                <li>点击 <span class="highlight">"📋 批量复制题目"</span> 按钮</li>
                <li>选择目标题库（题目将复制到这里）</li>
                <li>选择源题库（有题目的题库）</li>
                <li>勾选要复制的题目</li>
                <li>点击 <span class="highlight">"📋 开始复制"</span></li>
                <li>确认操作</li>
                <li>验证：原题库题目不变，目标题库题目增加</li>
            </ol>
        </div>

        <div class="test-section warning">
            <h2>⚠️ 重要区别</h2>
            
            <div class="comparison">
                <div class="before">
                    <h4>📦 移动操作</h4>
                    <p><strong>操作前：</strong></p>
                    <ul>
                        <li>题库A：5道题目</li>
                        <li>题库B：3道题目</li>
                    </ul>
                    <p><strong>移动2道题目从A到B后：</strong></p>
                    <ul>
                        <li>题库A：3道题目 ⬇️</li>
                        <li>题库B：5道题目 ⬆️</li>
                    </ul>
                    <p style="color: #dc3545;">⚠️ 原题库题目减少</p>
                </div>
                
                <div class="after">
                    <h4>📋 复制操作</h4>
                    <p><strong>操作前：</strong></p>
                    <ul>
                        <li>题库A：5道题目</li>
                        <li>题库B：3道题目</li>
                    </ul>
                    <p><strong>复制2道题目从A到B后：</strong></p>
                    <ul>
                        <li>题库A：5道题目 ➡️</li>
                        <li>题库B：5道题目 ⬆️</li>
                    </ul>
                    <p style="color: #28a745;">✅ 原题库题目保持不变</p>
                </div>
            </div>
        </div>

        <div class="test-section">
            <h2>🔧 技术实现详情</h2>
            
            <h3>新增API接口：</h3>
            <div class="api-endpoint">
                POST /admin/questions/{question_id}/move
                POST /admin/questions/{question_id}/copy
                POST /admin/question-banks/{bank_id}/copy-questions
                GET /admin/question-banks/{bank_id}/questions
            </div>
            
            <h3>前端界面优化：</h3>
            <ul>
                <li>🎨 独立的复制表单界面（绿色主题）</li>
                <li>📋 复制功能的专用复选框系统</li>
                <li>💡 清晰的功能说明和操作提示</li>
                <li>🔄 实时的选择统计和状态更新</li>
                <li>⚠️ 操作确认对话框防止误操作</li>
            </ul>
            
            <h3>数据库操作：</h3>
            <ul>
                <li>📊 自动更新题库题目计数</li>
                <li>🔄 事务处理确保数据一致性</li>
                <li>🗂️ 复制时生成新的题目记录</li>
                <li>⏰ 自动设置创建和更新时间</li>
            </ul>
        </div>

        <div class="test-section success">
            <h2>🎉 预期效果</h2>
            <p>完成这些功能后，管理后台应该具备：</p>
            <ul>
                <li>✅ <strong>灵活的题目管理</strong>：可以自由移动和复制题目</li>
                <li>✅ <strong>直观的操作界面</strong>：可视化选择，清晰的功能区分</li>
                <li>✅ <strong>安全的操作流程</strong>：确认对话框和详细的操作反馈</li>
                <li>✅ <strong>完整的功能覆盖</strong>：支持单个和批量操作</li>
                <li>✅ <strong>数据一致性保证</strong>：自动更新相关统计信息</li>
            </ul>
        </div>

        <div class="test-section info">
            <h2>📝 测试检查清单</h2>
            <ul class="step-list">
                <li>移动功能：题目从源题库消失，出现在目标题库</li>
                <li>复制功能：题目在源题库保留，同时出现在目标题库</li>
                <li>题库计数：操作后题库题目数量正确更新</li>
                <li>界面反馈：操作成功/失败有明确提示</li>
                <li>数据完整性：复制的题目内容完全一致</li>
                <li>错误处理：无效操作有适当的错误提示</li>
            </ul>
        </div>
    </div>
</body>
</html>
